 <!-- 右击表头菜单页代码  contextButton/index.vue -->
<template>
  <div ref="contextmenu" id="contextmenu" class="contextmenu">
    <div @click="checkbox(item)" class="contextmenu__item" ref="boxDiv" v-for="(item,k) in row" :key="k">
      <input class="contextmenu_input" ref="boxInput" @change="checkboxChange" type="checkbox" v-model="item.checked" :id="k" />
      <span style="margin-left:20px" ref="boxSpan">{{item.label}}</span>
    </div>
  </div>
</template>

<script>
    export default {
      name: "index",
      props:{
        tableColumn:Array
      },
      data () {
         return {
           row:[],
          }
      },
      created(){
      },
      mounted(){
        this.tableColumn.forEach(item=>{
          if(!!item.childNodes){
            if(item.hasOwnProperty('checked')){
                this.row.push(...item.childNodes)
            }
          }else{
            if(item.hasOwnProperty('checked')){
                this.row.push(item)
            }
          }
        })
      },
      destroyed(){
        document.removeEventListener('click', this.fooHeader) // 给整个document添加监听鼠标事件，点击任何位置执行fooHeader方法
        document.removeEventListener('mousedown', this.fooHeader) 
      },
      methods: {
        checkbox(row){
          row.checked=!row.checked
          this.$emit('sendColArr',this.dropCol)
        },
        checkboxChange(){
          // this.$emit('sendColArr',this.dropCol)
        },
        init (event) {
          let menu = document.querySelector('#contextmenu')
          menu.style.top = event.clientY + 'px'
          menu.style.left = event.clientX + 10 + 'px'
          document.addEventListener('click', this.fooHeader) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
          document.addEventListener('mousedown', this.fooHeader) 
        },
        fooHeader (e) {
            if(e.target==this.$refs.contextmenu||this.$refs.boxDiv.indexOf(e.target)>-1||this.$refs.boxInput.indexOf(e.target)>-1||this.$refs.boxSpan.indexOf(e.target)>-1){
            }else{
              this.$emit('fooHeader')
            }
        },
      }
    }
</script>

<style scoped lang="less">
  .contextmenu {
    position: fixed;
    background-color: #fff;
    max-height: 60%;
    overflow: auto;
    font-size: 12px;
    color: #000;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
    white-space: nowrap;
    z-index: 1000;
    color: #333;
    border-color: #89b1e4;
    .contextmenu__item {
      position: relative;
      display: block;
      height: 22px;
      line-height: 18px;
      border:1px solid transparent;
      margin: 1px;
      padding: 0 15px 0 10px;
      .contextmenu_input{
        position: absolute;
        left: 4px;
        top: 3px;
      }
    }
    .contextmenu__item:hover {
      cursor: pointer;
      background: #66b1ff;
      border:1px solid #80a4d0;
      color: #333;
    }
  }
</style>
